<template>
	<div class="userecord" :class="this.$store.getters.isIphoneX ? 'pad-top80' : 'pad-top'">
		<back-header title="个人记录"></back-header>
		<div class="userecord_warp" id="htmlDataList">
			<app-loading v-if="!myUserecord"></app-loading>
			<div v-else>
				<div class="userecordinfo"><img :src="myUserecord.avatar"><p>{{myUserecord.nickname}}</p><p>共抓了{{myUserecord.gamecount}}次</p></div>
				<div class="userecordlist">
					<div class="item" v-for="item in myUserecord.list">
						<a class="flex">
							<img class="img" :src="item.cover">
						<div class="info">
							<p class="name elip">
								{{item.title}}
							</p>
							<p class="time elip">
								{{item.start_time}}
								{{$route.query.uid}}
							</p>
						</div>
						<span class="align-right ">{{item.result == '0' ? '未命中' : '抓中了'}}</span></a>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script type="text/javascript">
	import appLoading from '../components/loading'
	import backHeader from '../components/backHeader'
	export default{
		name:"appUserecord",
		components:{backHeader,appLoading},
		data(){
			return {
				myUserecord:"",
			}
		},
		mounted(){
			this.playList();
		},
		methods:{
			playList(){
				this.$jsonp(`${this.URL_PREFIX}/OpenAPI/V1/User/playList`,{token:this.$store.state.userInfo.token,uid:this.$route.query.uid,page:1}).then((response) => {
		              console.log(response)
		              this.myUserecord = response.data;
		  		 })
			}
		}
	}
</script>

<style lang="less" scoped>
	.userecord{
		width:100%;
	}
	.userecordinfo {
	    padding-top: 15px;
	    padding-bottom: 15px;
	    text-align: center;
	    background: #f5f5f5;
	    img {
		    width: 60px;
		    height: 60px;
		    border-radius: 50px
		}
		p {
		    color: #636363;
		    line-height: 30px;
		    font-size:14px;
		}
	}
	.userecordlist{
		width:95%;
		margin:0 auto;
		background:#fff;
		.item{
			padding:10px 0;
			border-bottom: 1px solid #f2f2f2;
			img{
				width:55px;
				height:55px;
				border-radius: 3px;
				margin-right:10px;
			}
			.info{
				width:200px;
				.name{
					width: 100%;
				    color: #555;
				    font-size: 14px;
				    line-height: 25px;
				}
				.time{
					width: 100%;
				    color: #9b9b9b;
				    font-size:12px;
				    line-height:25px;
				}
			}
		}
	}
	.align-right {
		margin-left: auto;
		font-size:14px;
	}
</style>